<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/createClass.css">
    <script src="../data/data.js"></script>

</head>
<body>
    <!--创建班级-->

    <div class="container ">

        <!--头部导航：首页 - 公共管理 - 意见管理-->
        <div class="row header-nav">
            <div>
                <p class="glyphicon glyphicon-home" aria-hidden="true"> 基础管理 - <span>班级管理</span></p>
            </div>

        </div>

        <!--中间主要数据部分-->
        <div class="container main-content">
            <div class="row">
                <form class="form-inline clearfix">
                    <div class="form-group">
                        <label for="class-type">班级类型：</label>
                        <input type="email" class="form-control" id="class-type" placeholder="例：大班">
                    </div>
                    <div class="form-group">
                        <label for="class-teacher">主班老师：</label>
                        <input type="email" class="form-control" id="class-teacher" placeholder="例：豆豆">
                    </div>
                    <button type="button" class="search btn btn-success">搜索</button>
                    <button type="button" class="openNewClass btn btn-success  new-class-btn" data-toggle="modal" data-target="#openNewClass">开新班</button>
                </form>
            </div>

            <div class="row table-data">
                <table class="table table-bordered">
                    <thead>
                        <tr class="active">
                            <th>序号</th>
                            <th>班级名称</th>
                            <th>班级类型</th>
                            <th>主班老师</th>
                            <th>副班老师</th>
                            <th>班级人数</th>
                            <th>开班时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="class-data">
                        <!--<tr>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td class="operate-data">
                                <button>查看</button>
                                <button>编辑</button>
                                <button>删除</button>
                            </td>
                        </tr>-->
                    </tbody>
                </table>

            </div>


        </div>

        <!-- 底部分页部分-->
        <div class="row">
            <div class="col-md-1 col-lg-1 total-number">
                共<span></span>条
            </div>
            <div class="col-md-2 col-lg-2">
                <select class="page-break col-md-12 col-lg-12 new-class page-number">
                    <option value="5">5条/页</option>
                    <option value="10" selected>10条/页</option>
                    <option value="15">15条/页</option>
                    <option value="20">20条/页</option>
                    <option value="50">50条/页</option>
                    <option value="100">100条/页</option>
                </select>
            </div>
            <div class="col-md-3 col-lg-3">
                <nav aria-label="Page navigation">
                    <ul class="pagination page clearfix">
                        <li class="previous">
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li>
                            <nav aria-label="Page navigation" style="display: inherit;">
                                <ul class="pagination choose-number">
                                    <!--<li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>-->
                                </ul>
                            </nav>
                        </li>

                        <li class="next">
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-2 col-lg-2 leave">
                前往 <input class="leave-for" value="1"> 页
            </div>

        </div>





    </div>


    <!--开新班弹框的实现-->
    <!-- Modal -->
    <div class="modal fade" id="openNewClass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog open-new-class" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">开新班</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="openClassName" class="col-sm-3 control-label">班级名称 <span class="important">*</span>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control openClassName" id="openClassName" placeholder="请输入班级名称" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="openClassType" class="col-sm-3 control-label">班级类型：</label>
                            <div class="col-sm-4">
                                <select class="col-sm-12 chooseNewClass new-class" id="openClassType">
                                    <option selected>小班</option>
                                    <option>中班</option>
                                    <option>大班</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="openClassTeacher" class="col-sm-3 control-label">主班老师 <span class="important">*</span>:</label>
                            <div class="col-sm-4">
                                <select class="col-sm-12 openClassTeacher new-class" id="openClassTeacher">
                                    <!--<option selected>小班</option>
                                    <option>中班</option>
                                    <option>大班</option>-->
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="openAssisterTeacher" class="col-sm-3 control-label">副班老师 <span class="important">*</span>:</label>
                            <div class="col-sm-4">
                                <select class="col-sm-12 openAssisterTeacher new-class" id="openAssisterTeacher">
                                    <!--<option selected>小班</option>
                                    <option>中班</option>
                                    <option>大班</option>-->
                                </select>
                            </div>
                        </div>


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirm" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--删除时提示框-->
    <div class="modal fade" id="classRemove" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog open-new-class" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    删除后的数据将不可找回，您确定删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">不，我再考虑一下</button>
                    <button type="button" class="btn btn-primary confirm-remove" data-dismiss="modal">是的，态度坚决</button>
                </div>
            </div>
        </div>
    </div>


    <!--编辑时出现弹窗-->
    <!-- Modal -->
    <div class="modal fade" id="classCompile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog open-new-class" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="class-compile">编辑班级信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="compile-classid" class="col-sm-3 control-label">班级id号 <span class="important">*</span>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control openClassName class_id" id="compile-classid" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="compile-classname" class="col-sm-3 control-label">班级名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control openClassName class_name" id="compile-classname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="compile-classtype" class="col-sm-3 control-label">班级类型 <span class="important">*</span>:</label>
                            <div class="col-sm-9">
                                <select class="col-sm-12 openClassTeacher new-class class_type" id="compile-classtype">
                                    <option selected>小班</option>
                                    <option>中班</option>
                                    <option>大班</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="compile-mainteacher" class="col-sm-3 control-label">主班老师 <span class="important">*</span>:</label>
                            <div class="col-sm-9">
                                <select class="col-sm-12 openClassTeacher new-class class_teacher" id="compile-mainteacher">
                                    <!--<option selected>小班</option>
                                    <option>中班</option>
                                    <option>大班</option>-->
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="compile-assister" class="col-sm-3 control-label">副班老师 <span class="important">*</span>:</label>
                            <div class="col-sm-9">
                                <select class="col-sm-12 openClassTeacher new-class class_assister" id="compile-assister">
                                    <!--<option selected>小班</option>
                                    <option>中班</option>
                                    <option>大班</option>-->
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="compile-number" class="col-sm-3 control-label">班级人数 <span class="important">*</span>:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control openClassName class_number" id="compile-number" disabled>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="compile-classtime" class="col-sm-3 control-label">开班时间 <span class="important">*</span>:</label>
                            <div class="col-sm-9">
                                <input type="date" class="form-control openClassName class_time" id="compile-classtime">
                            </div>
                        </div>





                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary sure-modify" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>





    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../js/createClass.js"></script>
</body>
</html>